import React from 'react';
import PropTypes from 'prop-types';
import { Table } from '@teamix/ui';
import IssuesTable from './issuesTable';
import './index.scss';
import intl from '../../locale';

export default class BuildIssuesList extends React.Component {
  static propTypes = {
    branchName: PropTypes.string,
    buildResult: PropTypes.object,
    filterParams: PropTypes.object,
    updateCommitId: PropTypes.func,
  };

  static defaultProps = {
    branchName: 'master',
    filterParams: {},
    updateCommitId: () => {},
  };

  // 弹窗中改变状态，将所有表格数据刷新
  refreshData = () => {
    const { unresolvedTable, resolvedTable } = this;
    unresolvedTable && unresolvedTable.reloadTable();
    resolvedTable && resolvedTable.reloadTable();
  };

  render() {
    return (
      <div className="build-issue-list-container">
        <div className="build-issue-list-header">
          <Table
            className={'issue-table'}
            dataSource={[
              {
                id: 0,
                issue_content: intl.get({
                  id: 'code-assets.components.buildIssuesList.Problem',
                  defaultMessage: '问题',
                }),
                file_path: intl.get({
                  id: 'code-assets.components.buildIssuesList.FileName',
                  defaultMessage: '文件名',
                }),
                issue_level: intl.get({
                  id: 'code-assets.components.buildIssuesList.ProblemLevel',
                  defaultMessage: '问题等级',
                }),
                status: intl.get({
                  id: 'code-assets.components.buildIssuesList.State',
                  defaultMessage: '状态',
                }),
                ref_user: intl.get({
                  id: 'code-assets.components.buildIssuesList.ProblemIngress',
                  defaultMessage: '问题引入人',
                }),
                ref_time: intl.get({
                  id: 'code-assets.components.buildIssuesList.ImportTime',
                  defaultMessage: '引入时间',
                }),
              },
            ]}
            hasBorder={false}
            hasHeader={false}
          >
            <Table.Column
              title="pad"
              dataIndex="id"
              cell={() => {
                return <span>&nbsp;</span>;
              }}
              width={24}
            />
            <Table.Column
              title={intl.get({
                id: 'code-assets.components.buildIssuesList.Problem',
                defaultMessage: '问题',
              })}
              dataIndex="issue_content"
              className="issue-title-col"
            />
            <Table.Column
              title={intl.get({
                id: 'code-assets.components.buildIssuesList.FileName',
                defaultMessage: '文件名',
              })}
              dataIndex="file_path"
              className="issue-file-col"
            />
            <Table.Column
              title={intl.get({
                id: 'code-assets.components.buildIssuesList.ProblemLevel',
                defaultMessage: '问题等级',
              })}
              dataIndex="issue_level"
              className="issue-level-col"
            />
            <Table.Column
              title={intl.get({
                id: 'code-assets.components.buildIssuesList.State',
                defaultMessage: '状态',
              })}
              dataIndex="status"
              className="issue-level-col"
            />
            <Table.Column
              title={intl.get({
                id: 'code-assets.components.buildIssuesList.ProblemIngress',
                defaultMessage: '问题引入人',
              })}
              dataIndex="ref_user"
              className="issue-owner-col"
            />
            <Table.Column
              title={intl.get({
                id: 'code-assets.components.buildIssuesList.ImportTime',
                defaultMessage: '引入时间',
              })}
              dataIndex="ref_time"
              className="issue-time-col"
            />
          </Table>
        </div>
        <div className="build-issue-list-waiting">
          <IssuesTable
            headerTitle={intl.get({
              id: 'code-assets.components.buildIssuesList.UnresolvedIssues',
              defaultMessage: '未解决问题',
            })}
            issue_status="unresolved"
            {...this.props}
            refreshData={this.refreshData}
            ref={(ref) => {
              this.unresolvedTable = ref;
            }}
          />
        </div>
        <div className="build-issue-list-fixed">
          <IssuesTable
            headerTitle={intl.get({
              id: 'code-assets.components.buildIssuesList.ResolvedIssue',
              defaultMessage: '已解决问题',
            })}
            issue_status="resolved"
            {...this.props}
            ref={(ref) => {
              this.resolvedTable = ref;
            }}
            refreshData={this.refreshData}
          />
        </div>
      </div>
    );
  }
}
